<template>
  <div class="search">
    <div class="search-head">
      <div @click="routerBack" class="back">返回</div>
      <van-search class="com-search"
        v-model="searchValue"
        placeholder="搜索商品，发现更多优选"
        shape="round"
        show-action
        @search="searchToWord"
        background="rgb(253,222,74)"
        autofocus
        >
      </van-search>
      <div class="go" @click="searchToWord">搜索</div>
    </div>
    <div  class="hotwords">
      <h2  class="title">热门搜索</h2>
      <span @click="toKeyWord(item.word)" class="detail" :class="item.highlight?'is-hot':''" v-for="(item,index) in topSearch" :key="index">{{item.word}}</span>
    </div>
    <div  class="category">
      <h2  class="title">商品分类</h2>
      <router-link tag="span" :to="{path:'/tab/'+item.id}" class="detail" v-for="(item,index) in topDataEnd" :key="index">{{item.name}}</router-link>
    </div>
    <div class="more">
      <span class="download-text">去熊猫优选APP，找更多优惠</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'vant'
import http from '@/util/http'
import { mapGetters, mapActions, mapMutations } from 'vuex'
Vue.use(Search)

export default {
  data () {
    return {
      searchValue: '',
      topSearch: []
    }
  },
  created () {
    this.onSearchInit()
    this.topDataEnd.length || this.getTabAction()
  },
  components: {

  },
  methods: {
    ...mapActions('tabnav', ['getTabAction']),
    ...mapMutations('searchdata', ['setKeyWord']),
    onSearchInit () {
      http.request({
        url: '/api/search/home'
      }).then(res => {
        this.topSearch = res.data.data.hotWords
      })
    },
    toKeyWord (data) {
      this.setKeyWord(data)
      this.$router.push(`/result/${data}`)
    },
    searchToWord (data) {
      this.setKeyWord(data)
      this.$router.push(`/result/${data}`)
    },
    routerBack () {
      this.$router.back()
    }
  },
  computed: {
    ...mapGetters('tabnav', ['topDataEnd'])
  }
}
</script>

<style lang="scss" scoped>

.hotwords, .category{
  margin: 0 .533rem;
  .title{
    color: #877a73;
    font-size: .9rem;
    margin: .533rem;
  }
  .detail{
    background-color: #f5f5f5;
    padding: 0.2rem 0.53rem;
    display: inline-block;
    margin: 0 0.3rem 0.4rem 0;
    border-radius: 0.8rem;
    font-size: .5rem;
  }
  .is-hot{
    color: #fa585a;
  }
}
.more{
  text-align: center;
  margin-top: 3rem;
  .download-text{
    font-size: 0.373rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid #fa521e;
    color: #fa521e;
    border-radius: 0.5rem;
  }
}

</style>
